<template>
  <div id="app">
    <div class="banner" v-if="isShow">
      <img src="../img/20190712105552.png" alt />
      <span>{{time}}秒后自动跳转到爱否商城</span>
    </div>
    <div style="padding-bottom:50px;" v-if="ulShow">
      <router-view />
    </div>
    <ul class="tabList" v-if="ulShow">
      <li v-for="(item,index) in tabs" :key="index" @click="tabsClick(index)">
        <img :src="[num == index?item.imgt:item.img]" />
        <span :class="[num == index?'color1':'color2']">{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    this.num = 0;
    this.tabsClick();
    this.timer();
  },
  data() {
    return {
      isShow: true,
      ulShow: false,
      time: 5,
      num: 0,
      tabs: [
        {
          name: "首页",
          img: require("../img/home1.png"),
          imgt: require("../img/home2.png")
        },
        {
          name: "回收服务",
          img: require("../img/hs1.png"),
          imgt: require("../img/hs2.png")
        },
        {
          name: "手机维修",
          img: require("../img/wx1.png"),
          imgt: require("../img/wx2.png")
        },
        {
          name: "购物车",
          img: require("../img/shop1.png"),
          imgt: require("../img/shop2.png")
        },
        {
          name: "我的",
          img: require("../img/mine1.png"),
          imgt: require("../img/mine2.png")
        }
      ]
    };
  },
  methods: {
    tabsClick(index) {
      if (index == 0) {
        this.num = 0;
        this.$router.push("/");
      } else if (index == 1) {
        this.num = 1;
        this.$router.push("/hs");
      } else if (index == 2) {
        this.num = 2;
        this.$router.push("/wx");
      } else if (index == 3) {
        this.num = 3;
        this.$router.push("/shoping");
      } else if (index == 4) {
        this.num = 4;
        this.$router.push("/mine");
      } else {
        this.num = 0;
      }
    },
    timer() {
      var timer = setInterval(() => {
        if (this.time == 0) {
          this.isShow = false;
          this.ulShow = true;
          clearInterval(timer);
        }else{
          this.time--;  
        }
      }, 1000);
    }
  }
};
</script>

<style>
.pad {
  padding-bottom: 0.5rem;
}
.banner {
  position: relative;
  z-index: 999;
}
.banner span {
  font-size: 0.12rem;
  color: #fff;
  position: absolute;
  top: 0.1rem;
  left: 0.13rem;
}
.banner img {
  width: 100%;
  left: 100%;
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.color1 {
  color: #23a96f;
  font-size: 0.11rem;
}
.tabList li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabList li img {
  width: 0.23rem;
  height: 0.23rem;
}
.color2 {
  color: #bfbfbf;
  font-size: 0.11rem;
}
.tabList {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 0.5rem;
  align-items: center;
  border-top: 1px solid #cecece;
  z-index: 99;
  background: #fff;
}
ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
}
.active {
  color: red;
}
* {
  margin: 0;
  padding: 0;
}
</style>
